﻿/* Tutaj zaczyna się sekcja naszych własnych klas 
*
*
plik a_ToyStore.less
*
*
*/
html {
    height: 100%;
}
body
{
#gradient > .vertical(#e1e2e1, #f7f7f7);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.page
{
    width: 1004px;
    min-width : 1004px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}
#topContainer
{
    width: 100%;
    height:102px;
    position : relative;
}
#logo
{
    background-image: url('img/logo.png');
    width: 220px;
    height: 84px;
    position: absolute;
}
#searchContainer
{
    position: absolute;
    top: 50px;
    left : 330px;
    border: 2px solid white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    .box-shadow(@shadow: 0 1px 4px rgba(0,0,0,.5));
}

#searchContainerTittle
{
    width : 123px;
    height: 46px;
    #gradient > .vertical(@main1Color,@main1ColorDark);
	border-right: 2px solid white;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
	color: White;
    font-size : 14px;
	
}
#searchInputContainer
{
     width : 500px;
    height: 36px;
  #gradient > .vertical(@main2Color,@main2ColorDark);
    -webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	padding-top: 10px;
	padding-left: 15px;
}
/*Menu główne*/
#menu ul li 
{
    display : inline;
}
#menu ul li a
{
   font-size : 20px;
   color : @gray;
   border: 2px solid transparent;
   padding: 1px 10px 1px 10px;
   .transition(all 0.2s ease-in-out);
}
#menu ul li a:hover
{	
	color : white;
    text-decoration: none;
     #gradient > .vertical(@main2Color,@main2ColorDark);
    border: 2px solid white;
    .border-radius(5px);
	cursor: pointer;
	.box-shadow(@shadow: 0 0px 3px rgba(0,0,0,.5));
}
#pageContent
{
min-height: 400px;
}
.leftMenuHeader
{
	padding-top : 5px;
	color : white;
	font-size : 14px;
     #gradient > .vertical(@main2Color,@main2ColorDark);
	width: 196px;
	height: 25px;
	text-align: center;
}
.whiteBorder
{
	border: 2px solid white;
    .border-radius(5px);
	.box-shadow(@shadow: 0 0px 3px rgba(0,0,0,.5));
}
.leftMenuSeparator
{
    width: 100%;
    height: 1px;
    background: -moz-linear-gradient(left, #555 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#555), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,#555 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, #555 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, #555 0%,rgba(125,185,232,0) 100%); /* IE10+ */
	background: linear-gradient(left, #555 0%,rgba(125,185,232,0) 100%); /* W3C */
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",#555,#007db9e8)); // IE9 and down
}
.leftMenuItem a
{
	color: @main2ColorDark;
    width: 100%;
    display: block;
    font-size : 12px;
    padding-left: 20px;
    position: relative;
    .transition(all 0.2s ease-in-out);
	margin-top:2px;
	margin-bottom:2px;
	
}
.leftMenuItem a:hover
{
    color: @main1ColorDark;
    padding-left: 30px;
    cursor: pointer;
    text-decoration : none;
}
.productListItemTemplate
{
    width: 375px; 
    height: 170px; 
    float : left; 
    margin: 0px 0px 10px 20px ; 
    background: white;
    border: 1px solid #cecece;
    position: relative;
	
	//.transition(all 0.5s ease-in-out);
}
.productListItemTemplate:hover
{
border: 1px solid white;
	background: @grayLightest;
	.box-shadow(@shadow: 0 0px 3px rgba(0,0,0,.5));
}
.productListItemImage
{
    .whiteBorder;
    margin: 10px 0px 10px 5px;
    max-height : 150px;
    max-width : 105px;
    overflow : hidden;
}
.borderToCarousel
{
border: 1px solid white;
.box-shadow(@shadow: 0 0px 3px rgba(0,0,0,.5));


}
.carouselContent
{
    width: 100%; 
    height: 276px; 
    #gradient > .vertical(@grayLighter,@white);
    overflow: hidden;
}